<script setup lang="ts">



import AlbumCountTopFive from "@/components/AlbumCountTopFive.vue";
import CategoryRatio from "@/components/CategoryRatio.vue";
import Scatter from "@/components/Scatter.vue";
import Boxplot from "@/components/Treemap.vue";
import WordCloudCharts from "@/components/WordCloudCharts.vue";
</script>

<template>
  <div class="content">
    <div class="title">
      基于Python的“贝壳网”二手房数据可视化分析
    </div>
    <div class="row">
      <album-count-top-five></album-count-top-five>
      <boxplot></boxplot>
    </div>
    <div class="row">
      <category-ratio></category-ratio>
      <scatter></scatter>
      <word-cloud-charts></word-cloud-charts>
    </div>
  </div>
</template>

<style scoped>
.content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.row{
  width: 100%;
  height: 40vw;
  display: flex;
  flex-direction: row;
}
.title{
  font-size: 32px;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>